<template>
  <div class="box">
    <RenderTable 
      :queryParamArr = "queryParamArr"
      :defColumns="defColumns"
      :url = "url"
      :rowSelectionType = "'radio'"
      :isShowRowSelection = 'true'
      @onSelectChange = 'onSelectChange'      
      @handleEdit = "handleEdit"
      ref='renderTable'
    >
      <div slot="btn">
        <p-button type="primary" @click="showAddModal" style="margin-bottom: 10px">新增</p-button>
      </div>
    </RenderTable>

    <TrainPathModal ref='trainPathModal' @handleSuccess = 'handleSuccess'></TrainPathModal>

    <TrainPathDetail ref='trainPathDetail' v-show="selectedId" :selectedId = 'selectedId'>
    </TrainPathDetail>

  </div>
</template>

<script type="text/javascript">
import RenderTable from '@/components/renderTable'
import TrainPathModal from './modules/trainPathModal.vue'
import TrainPathDetail from './modules/trainPathDetail.vue'
import { timestampToDatetime } from "@/utils/util";

export default {
  data() {
    return {
      queryParamArr: [
      ],
      defColumns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: (t, r, index) => {
            return parseInt(index) + 1;
          },
        },
        {
          title: "培训路径代码",
          align: "center",
          dataIndex: "trainPathCode",
        },
        {
          title: "培训路径名称",
          align: "center",
          dataIndex: "trainPathName",
        },
        {
          title: "状态",
          align: "center",
          dataIndex: "status",        
          scopedSlots: { customRender: "status" },
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "remark",  
        },
        {
          title: "创建人",
          align: "center",
          dataIndex: "createBy",  
        },
        {
          title: "创建日期",
          align: "center",
          dataIndex: "createTime",
          customRender: (t, r, index) => {
            return timestampToDatetime(t);
          },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        list: '/mes-manpower/mesHrTrainPath/list',
        delete: '/mes-manpower/mesHrTrainPath',
        editStatus: '/mes-manpower/mesHrTrainPath/status',
      },
      selectedId: '',
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },         
    }
  },
  mounted() {
  }, 
  methods: {
    handleEdit(record){
      this.$refs.trainPathModal.showModal(record)
    },
    // 显示新增弹窗
    showAddModal(){
      this.$refs.trainPathModal.showModal()
    },
    handleSuccess(){
      this.$refs.renderTable.loadData()
    },

    // 选择table
    onSelectChange(selectionRows){
      console.log(selectionRows);
      this.selectedId = selectionRows[0].id
    }    
  },
  components: {
    RenderTable,
    TrainPathModal,
    TrainPathDetail
  }
}
</script>

<style lang="less" scoped>
</style>

